<template>
  <div class="page">
    <van-nav-bar title="标题" left-arrow @click-left="$router.go(-1)">
      <template #left>
        <van-icon name="wap-home-o" size="18" />
      </template>
    </van-nav-bar>
    <ul class="flex jc-sa f14 bg-fff pt-10" style="height: 30px">
      <li
        :class="active == index ? 'red' : ''"
        class="tac"
        v-for="(item, index) in textList"
        :key="index"
        @click="onClick(index)"
      >
        {{ item }}
      </li>
    </ul>
    <div
      class="card pl-15 pr-15 pb-15 bg-fff mb-10 pt-10"
      v-for="(item, index) in list"
      :key="index"
    >
      <router-link :to="`/order/orderdetail/${item.orderId}`" class="flex jc-sb aic">
        <p>
          <img 
          v-for="(item, index) in item.carts"
          :key="index"
          :src="item.imgUrl"
          alt=""
          style="width: 70px"
        />
        </p>
        <span class="f12" v-if="item.carts.length === 1">{{
          item.carts[0].masterName
        }}</span>
        <van-icon name="arrow" v-if="item.carts.length !== 1" />
        <span v-else>x{{item.carts[0].buyNum}}</span>
      </router-link>

      <van-cell-group>
        <van-cell
          title=""
          :value="`共${item.carts.length}件商品  实付${item.totalMoney}`"
        />
        <van-cell title="">
          <van-count-down
            v-if="item.orderStatus === '02'"
            slot="title"
            :time="15 * 60 * 1000 - (Date.now() - item.createTime)"
            format="剩余支付时间：mm 分 ss 秒"
          />
          <van-cell
            v-if="item.orderStatus === '01'"
            slot="title"
            title="订单状态:待发货"
          ></van-cell>
          <van-cell
            v-if="item.orderStatus === '00'"
            slot="title"
            title="订单状态:已取消"
          ></van-cell>
          <button v-if="item.orderStatus === '01' || item.orderStatus === '00'">
            重新购买
          </button>
          <button v-if="item.orderStatus === '02'">去支付</button>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import $axios from "@/utils/request";
export default {
  data() {
    return {
      active: 0,
      list: [],
      textList: ["全部", "已取消", "待发货", "待付款"],
      timeList: [],
      allList: [],
      newList: [],
      buynum: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await $axios.get('/order/all',)
      console.log(res);
      this.list = res.list;
      this.allList = res.list;
      console.log(this.list);
    },
    onClick(index) {
      this.active = index;
      index -= 1;
      this.newList = this.allList.filter((item) => {
        return item.orderStatus === "0" + index;
      });
      if (index == -1) {
        this.list = this.allList;
      } else {
        this.list = this.newList;
      }
    },
  },
};
</script>

<style scoped>
.van-icon {
  float: right;
}
.red {
  border-bottom: 2px solid red;
}
</style>